<template>
	<view>
		<!-- <view class="">
			<uv-empty mode="history" text="本页正在建设中" icon="https://cdn.uviewui.com/uview/empty/history.png"></uv-empty>
		</view> -->

		<view class="brop-box">
			<!-- <view class="btn-test">
				<button type="default" @click="test">test</button>
			</view> -->
			<wjf-row-label class="tabel-list" :labelList="labelList" @resClick="resClickLabel"></wjf-row-label>
		</view>
		<!-- <view class="" style="margin-top: 30rpx;">
			<button type="default" @click="navToTest">跳转测试页面</button>
		</view> -->
		<view class="" style="margin-top: 30rpx;">
			<button type="default" @click="testRequest">跳转测试页面</button>
		</view>
		<!-- <view class="" style="margin-top: 30rpx;">
			<button type="default" @click="doImportBrandModel()">处理品牌车型数据</button>
		</view> -->


		<!-- 品牌索引列表弹窗 -->
		<uv-popup ref="brand" mode="bottom" :closeOnClickOverlay="false" bgColor="none" :custom-style="brandPopStyle">
			<view class="popup-title-icon">
				<view class="popup-title-box">
					<text>title</text>
				</view>
				<uv-icon class="uv-icon" name="close" @click="closeBrandUp" size="30rpx"></uv-icon>
			</view>
			<!-- <view class="list-cell" v-for="(cell, index2) in brand" @click="openModelList(cell)">
				<image class="list-image" :src="cell.icon" mode="aspectFit"></image>
				<text class="name-text">{{cell.name}}</text>
			</view> -->
			<template>
				<uv-index-list :indexList="indexList" customNavHeight="88rpx">
					<template v-for="(brand, index) in actBrandList" :key="index">
						<uv-index-item>
							<view class="brand-list" v-for="(item, index1) in brand" :key="item.brandID">
								<view class="brand-list__item" @click="openModelList(item)">
									<image class="brand-list__item__image" :src="item.icon"></image>
									<text class="brand-list__item__name">{{item.name}}</text>
								</view>
								<uv-line></uv-line>
							</view>
						</uv-index-item>
					</template>
				</uv-index-list>
			</template>

		</uv-popup>

		<!-- 车系列表侧滑 -->
		<uv-popup ref="model" mode="right" :overlay="false" :closeOnClickOverlay="false" bgColor="none"
			:custom-style="modelListStyle">
			<!-- 顶部 -->
			<view class="model-title-icon">
				<view class="model-title-box">
					<uv-image :src="currentBrand.icon" mode="aspectFit" width="80rpx" height="80rpx"></uv-image>
					<text class="title-text">{{currentBrand.name}}</text>
				</view>
				<uv-icon class="uv-icon" name="close" @click="closeModelList" size="30rpx"></uv-icon>
			</view>
			<!-- 列表 -->
			<scroll-view scroll-y="true" class="scroll-Y">
				<view>
					<uv-list>
						<uv-list-item show-arrow border v-for="(model,index) in currentModelList" :key="model.modelID">
							<template v-slot="header">
								<view class="model-list-box">
									<uv-image :src="model.icon" mode="aspectFit" width="80rpx"
										height="80rpx"></uv-image>
									<text class="name-text">{{model.name}}</text>
								</view>
							</template>
						</uv-list-item>
						<view class="model-list-bottom"></view>
					</uv-list>
				</view>
			</scroll-view>
		</uv-popup>

		<!-- 综合筛选弹窗 -->
		<uv-popup ref="filter" mode="bottom" :closeOnClickOverlay="false" :custom-style="brandPopStyle">
			<view class="popup-title-icon">
				<view class="popup-title-box">
					<text>标题部分</text>
				</view>
				<uv-icon class="uv-icon" name="close" @click="closeFilterUp" size="30rpx"></uv-icon>
			</view>
			<view class="">
				<uv-empty mode="history" text="正在建设中" icon="https://cdn.uviewui.com/uview/empty/history.png"></uv-empty>
			</view>

		</uv-popup>
		<view v-if="showOverlay" class="view-overlay" :style="{height:height+'px'}">
			<view v-if="showMileageYears" class="mileage-years-box">
				<view class="mileage-box">
					<view class="title-box">
						<text>栏目标题部分</text>
						<text>{{mileageText}}</text>
					</view>
					<view class="slider-box">
						<wjf-slider-range :max="50" height="20" @change="mileageChange"></wjf-slider-range>

					</view>
				</view>
				<view class="years-box">
					<view class="title-box">
						<text>栏目标题部分</text>
						<text>{{yearsText}}</text>
					</view>
					<view class="slider-box">
						<wjf-slider-range :max="50" height="20" @change="yearsChange"></wjf-slider-range>
					</view>
				</view>
			</view>
			<view v-if="showPrice" class="price-box">
				<view class="title-box">
					<text>price标题部分</text>
					<text>{{priceText}}</text>
				</view>
				<view class="slider-box">
					<wjf-slider-range :max="50" height="20" @change="priceChange"></wjf-slider-range>

				</view>
				<!-- <view class="" style="width:750rpx;padding:30rpx;">
					<wjf-range-slider></wjf-range-slider>
				</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const cmd = db.command;
	const dbCollectionName = 'opendb-mall-goods';
	// 引入防抖
	import {
		sleep
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	// 导入综合筛选条件
	import CarFilterData from '@/common/js/car-filter-data.js'
	// 导入瓜子二手车品牌车系数据
	// import brand_model from '@/doc/brand-model.json'
	// const newsData = require('@/doc/brand-model.json')
	export default {
		computed: {
			// 获取窗口高度
			brandPopStyle() {
				let popHeight
				// #ifdef H5
				popHeight = (uni.getWindowInfo().windowHeight + 0) + 'px'
				// #endif

				// #ifdef APP-PLUS
				popHeight = (uni.getWindowInfo().windowHeight - this.statusBarHeight) + 'px'
				// #endif
				return {
					borderTopLeftRadius: '10rpx',
					borderTopRightRadius: '10rpx',
					backgroundColor: '#ffffff',
					height: popHeight
				}
			},
			height() {
				return uni.getSystemInfoSync().windowHeight;
			},
			mileageText() {
				if (this.formDataMileage.firstValue === 0 && this.formDataMileage.secondValue === 50) {
					return '不限'
				}
				if (this.formDataMileage.firstValue === 0 && this.formDataMileage.secondValue < 50) {
					return `${this.formDataMileage.secondValue}以下`
				}
				if (this.formDataMileage.firstValue > 0 && this.formDataMileage.secondValue === 50) {
					return `${this.formDataMileage.firstValue}以上`
				}
				if (this.formDataMileage.firstValue > 0 && this.formDataMileage.secondValue < 50) {
					return `${this.formDataMileage.firstValue}-${this.formDataMileage.secondValue}`
				}

				return false
			},
			yearsText() {
				if (this.formDataYears.firstValue === 0 && this.formDataYears.secondValue === 50) {
					return '不限'
				}
				if (this.formDataYears.firstValue === 0 && this.formDataYears.secondValue < 50) {
					return `${this.formDataYears.secondValue}以下`
				}
				if (this.formDataYears.firstValue > 0 && this.formDataYears.secondValue === 50) {
					return `${this.formDataYears.firstValue}以上`
				}
				if (this.formDataYears.firstValue > 0 && this.formDataYears.secondValue < 50) {
					return `${this.formDataYears.firstValue}-${this.formDataYears.secondValue}`
				}

				return false
			},
			priceText() {
				if (this.formDataPrice.firstValue === 0 && this.formDataPrice.secondValue === 50) {
					return '不限'
				}
				if (this.formDataPrice.firstValue === 0 && this.formDataPrice.secondValue < 50) {
					return `${this.formDataPrice.secondValue}以下`
				}
				if (this.formDataPrice.firstValue > 0 && this.formDataPrice.secondValue === 50) {
					return `${this.formDataPrice.firstValue}以上`
				}
				if (this.formDataPrice.firstValue > 0 && this.formDataPrice.secondValue < 50) {
					return `${this.formDataPrice.firstValue}-${this.formDataPrice.secondValue}`
				}
				return false
			}

		},
		data() {
			return {
				statusBarHeight: 0,
				// 显示遮罩
				showOverlay: false,
				showMileageYears: false,
				showPrice: false,
				list: [],
				// indexList
				indexList: ["A",
					"B",
					"C",
					"D",
					"E",
					"F",
					"G",
					"H",
					"I",
					"J",
					"K",
					"L",
					"M",
					"N",
					"O",
					"P",
					"Q",
					"R",
					"S",
					"T",
					"U",
					"V",
					"W",
					"X",
					"Y",
					"Z"
				],
				labelList: [{
						title: '品牌/车系',
						active: false
					},
					{
						title: '年限/里程',
						active: false
					},
					{
						title: '价格',
						active: false
					},
					{
						title: '综合筛选',
						active: false
					}
				],
				formDataMileage: {
					firstValue: 0,
					secondValue: 50
				},
				formDataYears: {
					firstValue: 0,
					secondValue: 50
				},
				formDataPrice: {
					firstValue: 0,
					secondValue: 50
				},
				modelListStyle: {
					width: '66vw',
					borderTopLeftRadius: '20rpx',
					backgroundColor: '#ffffff',
					boxShadow: '-5px 0px 10px rgba(0, 0, 0, 0.3)'
				},
				brandList: [], //初始及处理过的品牌数组
				actBrandList: [], //已使用的品牌数据，分第一次和第二次并入
				currentBrand: {}, //当前选中品牌
				localeModel: {}, //每次调取车系数据后，保存在此对象中，品牌ID为键，值为所属车系的数组，列表时，先查看此变量中是否存在
				currentModelList: []
			}
		},
		onLoad() {
			// this.getBrandData()
			// this.getModelData()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
		},
		methods: {
			async testRequest() {
				uni.navigateTo({
					url: './selectBrandModel',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				// await this.$gptRequest({
				// 	url: 'translate-conversation.php',
				// 	data: {
				// 		userText: '这是一段测试文字。',
				// 		targetLang:'en'
				// 	}
				// }).then(res => {
				// 	console.log(res.data);
				// })
			},
			getLetterArr() {
				const uppercaseLetters = [];
				for (let i = 65; i <= 90; i++) {
					uppercaseLetters.push(String.fromCharCode(i));
				}
				console.log(uppercaseLetters);
			},

			navToTest() {

				uni.navigateTo({
					url: './nvue-test',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			test() {
				// uni.getWindowInfo({
				// 	success(res) {
				// 		console.log(res);
				// 	}
				// })
				console.log(CarFilterData);
			},
			async doImportBrandModel() {
				// 将分组字母填充到每个相应的品牌中,并生成新的不含字母的大数组
				let new_brand_model = []
				for (let key in brand_model) {
					brand_model[key].forEach(item => item.group = key)
					new_brand_model.push(...brand_model[key])
				}

				// console.log(new_brand_model);
				// 处理品牌及车系相应的属性
				let tt = new_brand_model.map(item => {
					return {
						icon: item.icon,
						b_name: {
							"zh-Hans": item.name,
							en: item.name,
							ru: item.name
						},
						group: item.group,
						key: item.value,
						status: true,
						sort: 0,
						children: item.tag.reduce((pre, curr) => {
							if (curr.name != '不限车系' && curr.id != '-1') {
								pre.push({
									icon: curr.icon,
									m_name: {
										"zh-Hans": curr.name,
										en: curr.name,
										ru: curr.name
									},
									key: curr.value,
									sort: 0,
									status: true
								})
							}
							return pre
						}, [])
					}
				})


				// 添加brandID & modelID
				let num1 = 10000
				for (let i = 0; i < tt.length; i++) {
					tt[i].sort = num1 + i * 10000;
					tt[i].brandID = num1 + i * 10000 + '';
					let num2 = 100
					for (let j = 0; j < tt[i].children.length; j++) {
						tt[i].children[j].sort = tt[i].sort + num2 + j * 100;
						tt[i].children[j].modelID = (tt[i].sort + num2 + j * 100) + '';
						tt[i].children[j].brandID = tt[i].brandID
					}
				}
				// console.log(tt);

				// 扁平化数组
				// let tt = []
				// for (let i = 0; i < brand_model.length; i++) {
				// 	tt.push({
				// 		brandID: brand_model[i].brandID,
				// 		cname: brand_model[i].cname,
				// 		icon: brand_model[i].icon,
				// 		key: brand_model[i].key,
				// 		parent_id: brand_model[i].parent_id,
				// 		sort: brand_model[i].sort,
				// 		status: true
				// 	})
				// 	for (let j = 0; j < brand_model[i].children.length; j++) {
				// 		tt.push({
				// 			...brand_model[i].children[j]
				// 		})
				// 	}
				// }

				// 过滤出品牌数组

				let brandArr = tt.map(item => {
					return {
						b_name: item.b_name,
						group: item.group,
						brandID: item.brandID,
						icon: item.icon,
						key: item.key,
						sort: item.sort,
						status: item.status
					}
				})

				// 过滤出车系数组
				// let modelArr = tt.reduce((pre, curr) => {
				// 	pre.push(...curr.children)
				// 	return pre
				// }, [])

				// console.log(brandArr)
				// 保存到数据库
				let val = 0
				while (brandArr.length > 0) {
					val++
					let ttData = brandArr.splice(0, 50)
					await this.toSaveBrandData(ttData, val)
				}

				// console.log(tt);
			},
			async toSaveBrandData(data, val) {
				await db.collection('wjf-brand').add(data).then(res => {
					console.log(val, res);
				})
				// console.log(val)
				// await new Promise(((resolve, reject) => {
				// 	setTimeout(()=>{
				// 		console.log(val, data);
				// 		resolve()
				// 	},50)
				// }))

			},


			// 价格
			priceChange(e) {
				// console.log(e);
				this.formDataPrice.firstValue = e.firstValue
				this.formDataPrice.secondValue = e.secondValue
			},
			// 里程数
			mileageChange(e) {
				// console.log(e);
				this.formDataMileage.firstValue = e.firstValue
				this.formDataMileage.secondValue = e.secondValue
			},
			// 年限
			yearsChange(e) {
				// console.log(e);
				this.formDataYears.firstValue = e.firstValue
				this.formDataYears.secondValue = e.secondValue
			},
			async getBrandData() {
				await db.collection('wjf-brand').where({
					status: true
				}).field('b_name["zh-Hans"] as name,icon,brandID,group').get().then(res => {
					console.log('读取品牌数据库', res.result.data);
					this.brandList.length = 0; //清空数组

					for (let i = 0; i < this.indexList.length; i++) {
						this.brandList.push(res.result.data.filter(item => item.group == this.indexList[i]))
					}

					this.actBrandList = this.brandList.splice(0, 2)
					// console.log(this.actBrandList);
					// console.log(this.brandList);
					// this.getModelData()
				})
			},
			// 车系数据采用现读的方法，用到哪个现读哪个
			async getModelData(brandID) {
				await db.collection('wjf-model').where({
					status: true,
					brandID
				}).field("m_name['zh-Hans'] as name,icon,brandID,modelID").get().then(res => {
					this.currentModelList = res.result.data
					this.localeModel[brandID] = res.result.data
					// console.log('读取车系数据库', res.result.data);
				})
			},

			// 点击标签后的处理逻辑
			resClickLabel(index) {
				this.labelList[index].active = !this.labelList[index].active
				if (index === 0) {
					this.showMileageYears = false
					this.showPrice = false
					this.showOverlay = false
					this.labelList[1].active = false
					this.labelList[2].active = false
					// this.clickBrandBtn(this.labelList[index].active)
					uni.navigateTo({
						url: './selectBrandModel',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (index === 1) {
					this.showPrice = false
					this.labelList[0].active = false
					this.labelList[2].active = false
					if (!this.showMileageYears) {
						this.showOverlay = true
						this.showMileageYears = true
						this.formDataMileage.firstValue = 0
						this.formDataMileage.secondValue = 50
						this.formDataYears.firstValue = 0
						this.formDataYears.secondValue = 50
						this.labelList[1].active = true
					} else {
						this.showOverlay = false
						this.showMileageYears = false
						this.labelList[1].active = false
					}
				}
				if (index === 2) {
					this.showMileageYears = false
					this.labelList[0].active = false
					this.labelList[1].active = false
					if (!this.showPrice) {
						this.showOverlay = true
						this.showPrice = true
						this.formDataPrice.firstValue = 0
						this.formDataPrice.secondValue = 50
						this.labelList[2].active = true
					} else {
						this.showOverlay = false
						this.showPrice = false
						this.labelList[2].active = false
					}
				}
				if (index === 3) {
					this.showMileageYears = false
					this.showPrice = false
					this.showOverlay = false
					this.labelList[0].active = false
					this.labelList[1].active = false
					this.labelList[2].active = false
					this.clickFilter(this.labelList[index].active)
				}
			},
			clickBrandBtn(act) {

				if (act) {
					this.$refs.brand.open()
					setTimeout(() => {
						this.actBrandList = this.actBrandList.concat(this.brandList)
					}, 1000)
					console.log(this.actBrandList);
				} else {
					this.$refs.brand.close()
					this.actBrandList.splice(2, 24)
				}
			},
			clickFilter(act) {
				if (act) {
					this.$refs.filter.open()
				} else {
					this.$refs.filter.close()
				}
			},
			closeFilterUp() {
				this.$refs.filter.close()
				this.labelList[3].active = false
			},
			closeBrandUp() {
				this.$refs.brand.close()
				this.actBrandList.splice(2, 24)
				this.labelList[0].active = false
			},
			openModelList(brand) {
				// 先检查是否已保存过该品牌的车系，没有再读取
				this.currentBrand = brand
				if (this.localeModel.hasOwnProperty(brand.brandID)) {
					this.currentModelList = this.localeModel[brand.brandID]
				} else {
					this.getModelData(brand.brandID)
				}
				this.$refs.model.open()
			},
			closeModelList() {
				this.$refs.model.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.brop-box {
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
		width: 100vw;
		padding-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.tabel-list {
			margin-left: 30rpx;
		}

		.btn-test {
			width: 200rpx;
		}
	}

	.popup-title-icon {
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: center;
		height: 80rpx;
		width: 100vw;
		border-bottom: 1rpx solid #ddd;

		.popup-title-box {
			width: 95vw;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}

		.uv-icon {
			padding-right: 20rpx;
		}

		// background-color: #ddd;
	}

	.view-overlay {
		background-color: rgba(#555, 0.3);

		.mileage-years-box {
			height: 750rpx;
			margin-top: 30rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 8rpx;
		}

		.mileage-box {
			margin-top: 30rpx;
			padding: 20rpx 30rpx;

		}

		.years-box {
			margin-top: 80rpx;
			padding: 20rpx 30rpx;
		}

		.title-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.slider-box {
			width: 650rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.price-box {
			height: 400rpx;
			margin-top: 30rpx;
			background-color: #fff;
			padding: 30rpx 50rpx;
			border-radius: 8rpx;
		}
	}

	.list-cell {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		box-sizing: border-box; //注意H5和App是否有区别？
		height: 100rpx;
		padding: 0 20rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;

		.list-image {
			width: 80rpx;
			height: 80rpx;
		}

		.name-text {
			margin-left: 10rpx;
		}
	}

	// 车系弹窗
	.model-title-icon {
		/* #ifdef APP-PLUS */
		margin-top: var(--status-bar-height);
		/* #endif */
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: center;
		height: 100rpx;
		width: 100%;
		border-bottom: 1rpx solid #ddd;

		.model-title-box {
			width: 95vw;
			padding: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.title-text {
				color: #555;
				font-size: 26rpx;
				margin-left: 20rpx;
			}
		}

		.uv-icon {
			padding-right: 30rpx;
		}
	}

	.model-list-box {
		height: 90rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.name-text {
			margin-left: 10rpx;
			width: 70%;
			font-size: 26rpx;
			color: #555;
		}
	}

	.model-list-bottom {
		border-top: 1px solid #eee;
		height: 50rpx;
		// background-color: limegreen;
	}

	.scroll-Y {
		/* #ifdef H5 */
		height: calc(100vh - 104rpx - 52px - 0px);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--status-bar-height) - 84rpx - 0px);
		/* #endif */
	}

	.brand-list {

		&__item {
			// @include flex;
			display: flex;
			padding: 6px 12px;
			align-items: center;
			width: 75%;
			// background-color: palegreen;

			&__image {
				height: 80rpx;
				width: 80rpx;
				border-radius: 6rpx;
			}

			&__name {
				font-size: 28rpx;
				margin-left: 20rpx;

				line-height: 30rpx;
				color: #555;

			}
		}

	}
</style>